<template>
  <div>
    <router-view v-if="isLoadFinish" />

    <div v-if="loading" class="loading"></div>

  </div>
</template>

<script lang="ts" setup>

import { ElLoading } from 'element-plus';
import { onMounted, ref } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from './stores/counter';

const loading = ref(true);
let isLoadFinish = ref(false);

let store = useStore();
store.languageCode = $kt.i18n.getLanguageCode();
let adminMenus = ref(null);

/**
 * 开始加载页面
 * @name: loadStart
 * @description: 加载页面
 */
const loadStart = () => {
  var timer = setInterval(() => {
    const elLoading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.1)',
    });
    if (isLoadFinish.value) {
      elLoading.close();
      loading.value = false;
      window.clearInterval(timer);
    }
  }, 500)
}

const getAppFront = async () => {
  const res = await $kt.request.request({
    url: '/system/dictI18n/getAppFront',
    method: 'post'
  });
  store.appFront = res.data.data;
}

const getAdminMenus = async () => {
  const res = await $kt.request.request({
    url: '/admin/menu/getNoDirectoryMenus',
    method: 'post'
  });
  adminMenus.value = res.data.data;
  localStorage.setItem('adminMenus', JSON.stringify(res.data.data));
}

onMounted(() => {
  loadStart();
  getAppFront();
  getAdminMenus();
  isLoadFinish.value = true;
});

</script>

<style lang="scss">
html,
body {
  margin: 0;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: aliceblue;
}

// 修改垂直滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
// 修改选中文字背景色
::selection {
  background: #409effaa;
  padding: 20px;
  color: #fff;
}

</style>
